<template>
  <div class="common-layout">
    <el-container>
      <el-aside >
        <MyAside></MyAside>
      </el-aside>
      <el-container>
        <el-header>
          <MyHeader></MyHeader>
           <!-- <Header/> -->
        </el-header>
        <el-main>
          <!--路由组件 路由出口 -->
          <router-view></router-view>
        </el-main>
        <el-footer>
          <MyFooter></MyFooter>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue';
import MyHeader from '@/components/MyHeader.vue';
import MyAside from '@/components/MyAside.vue';
import MyFooter from '@/components/MyFooter.vue';
</script >
<style lang="less" scoped>
.el-header,
.el-footer {
  background-color: var(--el-color-primary-light-8)
}
.el-header {
  background-image: linear-gradient(to right, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);
  color: var(--el-color-white);
}
.el-aside {
  // background-color: var(--el-color-primary-light-8);
  // background-color: rgb(84, 92, 100);
  background-color: #007fa4;
  width: 200px;
  margin: 0;
}

.el-main {
  background-color: var(--el-color-primary-light-6);
  height: calc(~'100vh - 120px'); // 120px 是header和footer的高度和,记得减号前后要有空隙
  overflow: auto;
}
</style>
